<%@page import="br.com.guardaroupavirtual.model.Usuario"%>
<%@page import="br.com.guardaroupavirtual.model.Produto"%>
<%@page import="java.util.List"%>

<jsp:include page="../compartilhado/header.jsp"></jsp:include>

<h2>Bem vindo ao GRV!</h2>
<div id="montaLook" >
<div id="filtro" class="col-md-12">
	<div class="pull-right">
	<div class="form-inline">
		Monte seu filtro:
		<label for="cboCategoria">Categorias</label>
		<select id="cboCategoria" onchange="GetProdutosByFiltro()" class="form-control" >
		</select>		 
		<label for="cboSexo">Genero</label>
		<select id="cboSexo" onchange="GetProdutosByFiltro(), GetManequim()" class="form-control" >
			<option value="">.::Selecione::.</option>
			<option value="M">Masculino</option>
			<option value="F">Feminino</option>
		</select>
	
	  <label for="cboMedida">Tamanhos:</label>
	  <select id="cboMedida" onchange="GetProdutosByFiltro(), GetManequim()" class="form-control" >
	  	<option value="">Selecione</option>
	  	<option value="P">P</option>
	  	<option value="M">M</option>
	  	<option value="G">G</option>
	  	<option value="XG">XG</option>
	  </select>
	  
	  <label for="cboLookEvento">Looks:</label>
	  <select id="cboLookEvento" onchange="GetProdutosByFiltro()" class="form-control" >
	  </select>	  
			
	</div>			
	</div>
</div><!-- FIM DIV FILTRO -->

<div class="col-md-4 droppable" style="height: 500px; border: solid 1px red;">
  
</div> <!-- FIM DIV QUE ACEITE OS ITENS DROPPRABLES -->
<div id="sortable1" class="col-md-8" style="height: 500px; border: solid 1px red;">
 
</div>

</div> <!-- FIM DIV MONTALOOK -->

<jsp:include page="../compartilhado/footer.jsp"></jsp:include>

<script type="text/javascript">
	function GetCategorias(){
		$.ajax({
			method: "get",
			url: "Home",
			context: document.body,
			dataType: "text",
			data: { cmd : "GetCategorias" },
			cache: false,
			success: function(data){
				//Listando as categorias
				var categorias = $.parseJSON(data);
				$("#cboCategoria").empty();
				$("#cboCategoria").append('<option value="">.::Selecione::.</option>');
				$.each(categorias, function(index, categoria) {		
					$("#cboCategoria").append('<option value="'+categoria.id+'">'+categoria.nome+'</option>');					
				});
			}
		});
	}
	
	function GetLooks(){
		$.ajax({
			method: "get",
			url: "Home",
			context: document.body,
			dataType: "text",
			data: { cmd : "GetLookEventos" },
			cache: false,
			success: function(data){
				//Listando as categorias
				var looks = $.parseJSON(data);
				$("#cboLookEvento").empty();
				$("#cboLookEvento").append('<option value="">.::Selecione::.</option>');
				$.each(looks, function(index, look) {		
					$("#cboLookEvento").append('<option value="'+look.id+'">'+look.nome+'</option>');					
				});
			}
		});
	}	
	
	function GetProdutosByFiltro(){
		$.ajax({
			method: "get",
			url:"Home",
			dataType: "text",
			data: {
					cmd : "GetProdutosByFiltro", 
					categoriaID : $("#cboCategoria").val(),
					lookEventoID : $("#cboLookEvento").val(),
					sexo : $("#cboSexo").val(),
					medida : $("#cboMedida").val()
				  },
			cache: false,
			success: function(result){
				//Listando os produtos de acordo com a categoria
				var produtos = $.parseJSON(result);
			    MontaListaProdutos(produtos);
			}
		});
	};
	
	function MontaListaProdutos(produtos){
		$("#sortable1").empty();
		$.each(produtos, function(index, produto) {
			$("#sortable1").append(
				'<div class="col-xs-4 col-md-2">'+
					'<div class="close draggable" style="color:red;">X'+
						'<a href="#" class="thumbnail" > <img src="'+produto.foto+'" alt="..." height="160px" width="160px">'+'</a>'+
						'<a href="Produto?cmd=detalhe&id='+produto.id+'" target="_blank" class="detalhe"> Detalhes </a>'+
					'</div>'+
				'</div>'
			);		    				
		});
		$( ".draggable" ).draggable(
			{
				connectToSortable: '.droppable',
				helper:'clone'
			}
		);
	    $( ".droppable" ).droppable(
	    	{
	    		hoverClass: 'col-xs-6 col-md-6',
	    		drop: function(ev, ui){
	    			if(!ui.draggable.hasClass("droped")){
	    				$(this).append(ui.draggable.clone().removeClass().addClass("droped close").draggable());
	    			}
	    			$(".close").on('click', function(){
			    		$(this).remove();	
			    	});		    
	    		}
	    	}		
	    ).disableSelection();		
	}
	
	/*
		Exibe o manequim na div com a classe droppable
	*/
	function GetManequim(){
		var sexo;
		var medida;
		
		sexo = $('#cboSexo').val() != '' ? $('#cboSexo').val() : $('#usuarioSexo').val();
		medida = $('#cboMedida').val() != '' ? $('#cboMedida').val() : $('#usuarioMedida').val();
		$(".droppable").css({'background': '#FFFFFF'});
		if(sexo != '' && medida != '')
			$(".droppable").css({"background-image" : 'url(resources/img/'+sexo+'_'+medida+'.png)', 'background-repeat': 'no-repeat'});
	}

	
	$(document).ready(function() {
		//Carregando todos os produtos j� que n�o existem filtros definidos
		GetProdutosByFiltro();
		/*Populando os combos para os filtros*/
		GetCategorias();
		GetLooks();
		GetManequim();
	});
</script>
